<template>
    <div class="tab-bar-item"  @click="handleTabbar">
        <div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else ><slot name="item-icon-active"></slot></div>
        <div :style="isActiveStyle">
            <slot  name="item-text"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name:"TabBarItem",
        data () {
            return {
                // isActive:false
            }
        },
        props:{
            path:String,
            activeColor:{
                type:String,
                default:'#D4237A'
            }
        },
        computed:{
            isActive(){
                return this.$route.path.indexOf(this.path)!=-1
            },
            isActiveStyle(){
                return this.isActive ? {color:this.activeColor} : {}
            }
        },
        methods:{
          handleTabbar(){
            this.isActive || this.$router.push(this.path)
          }
        }
    }
</script>

<style scoped>
 .tab-bar-item{
    padding-top: 3px;
    flex: 1;
    text-align: center;
    font-size: 13px;
  }
  .tab-bar-item img{
      width: 24px;
      height: 24px;
      vertical-align: middle;
  }
  .active{
      color: #D4237A;
  }
</style>